<template>
  <d2-container>
   <template>

    <el-button slot="header" type="primary" style="margin-bottom: 5px" @click="change">新 增</el-button>

      <el-table stripe border
          :data="tableData"
          style="width: 100%"
          >
          <el-table-column type="index" fixed label="序号" width="50"></el-table-column>
          <el-table-column
            fixed
            prop="shopNo"
            label="门店编号">
          </el-table-column>
          <el-table-column
            fixed
            prop="shopName"
            label="门店名称">
          </el-table-column>
          <el-table-column
            fixed
            prop="fullArea"
            label="所在区域" >
          </el-table-column>
          <el-table-column
          fixed
            prop="shopAddress"
            label="门店地址" >
          </el-table-column>
          <el-table-column
          fixed
            prop="phone"
            label="电话" >
          </el-table-column>
          <el-table-column
          fixed
            prop="employeeQuantity"
            label="员工人数" align="center" width="100">
          </el-table-column>
          <el-table-column label="状态" align="center" width="100">
					<template slot-scope="scope">
            <span v-if="scope.row.shopStatus == 1">正常</span>
						<span v-if="scope.row.shopStatus == 0">关闭</span>
					</template>
				</el-table-column>
        <el-table-column label="创建日期" prop="createTime" align="center" :formatter="forDate" width="200"></el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            width="250">
            <template slot-scope="scope">
              <el-button type="primary" size="small" @click="updateRow(scope.row.shopNo, false)">查看</el-button>
              <el-button type="primary" size="small" @click="updateRow(scope.row.shopNo, true)">编辑</el-button>
              <el-button
                @click.native.prevent="deleteRow(scope.$index, tableData)"
                size="small">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
       
    </template>

    <template>
      <div>
          <keep-alive>
              <addPage :addPage="addComponent" @on-addPage-change="onAddPageChange" @on-loadlist-change="fetchData" ></addPage>
            </keep-alive>
      </div>
      <div>
          <keep-alive>
              <updatePage @on-loadlist-change="fetchData"  :uShow="updateComponent" @on-uShow-change="onUShowChange"  :aType="actionType" :uId="updateId" @on-id-change="onIdChange"></updatePage>
            </keep-alive>
      </div>
    </template>

  </d2-container>
</template>

<script>
import dayjs from 'dayjs'
import { getShops, delShop } from '@api/restaurant/sys/resShop'
import addPage from './addShop'
import updatePage from './updateShop'


export default {
  name: 'shop-list',
  components: {
    addPage, updatePage
  },
  data () {
    return {
      addComponent: false,
      updateComponent: false,

      updateId: 0,
      actionType: false,  // 是否显示“更新”按钮，false是查看，true是编辑

      tableData: []
    }
  },
  mounted () {
    this.fetchData()
  },
  methods: {
    fetchData () {
      this.loading = true
      getShops().then(res => {
        this.tableData = res.data
        this.loading = false
      }).catch(err => {
        console.log('err', err)
        this.loading = false
      })
    },

    forDate (row, column) {
	  var formatTime = ''
	  if (column.property == 'createTime') {
	    formatTime = row.createTime == null ? '' : dayjs(row.createTime).format('YYYY-MM-DD HH:mm:ss')
	  }
	  if (column.property == 'payTime') {
	    formatTime = row.payTime == null ? '' : dayjs(row.payTime).format('YYYY-MM-DD HH:mm:ss')
	  }
	  return formatTime
    },
    /** 双向绑定 start */
    change () {
      this.addComponent = !this.addComponent
    },
    onAddPageChange (val) {
      this.addComponent = val// ④外层调用组件方注册变更方法，将组件内的数据变更，同步到组件外的数据状态中
    },
    // 显示子组件
    uChange () {
      this.updateComponent = !this.updateComponent
    },
    onUShowChange (val) {
      this.updateComponent = val// ④外层调用组件方注册变更方法，将组件内的数据变更，同步到组件外的数据状态中
    },
    idChange (val) {
      this.updateId = val
      // console.log('updateRow updateId: ' + val)
    },

    onIdChange (val) {
      this.updateId = val// ④外层调用组件方注册变更方法，将组件内的数据变更，同步到组件外的数据状态中
    },

    // 编辑/查看
    updateRow (id, actionType) {
      this.uChange()
      this.idChange(id)
      this.actionType = actionType

      // console.log('updateRow actionTyp: ' + actionType)
    },

    /** 双向绑定 end */
    deleteRow (index, rows) {

      let shopName = rows[index].shopName;

      this.$confirm('确定删除[' + shopName + ']吗').then(() => {
        let shopNo = rows[index].shopNo
        this.loading = true
        delShop({ shopNo: shopNo }).then(res => {
          this.fetchData()
          this.loading = false
        }).catch(err => {
          console.log('err', err)
          this.loading = false
        })
      }).catch(() => {
        console.log('取消操作')
      })
    },
    
  }
}
</script>
